<template>
	<div class="regist">
		<el-form ref="registForm" :model="registForm" :rules="registRules" class="login-form" auto-complete="on" label-position="left">
			<h3 class="title">用户注册</h3>
			<el-form-item prop="phone">
				<span class="svg-container"><i class="el-icon-phone"></i></span>
				<el-input v-model="registForm.phone" name="phone" auto-complete="on" placeholder="请输入手机号"/>
			</el-form-item>
			<el-form-item prop="vercode" style="width: 70%;position: relative;">
					<span class="svg-container"><i class="el-icon-edit"></i></span>
					<el-input v-model="registForm.vercode" name="vercode" placeholder="请输入验证码" style="width: 50%;"></el-input>
					<el-button v-if="vertificationcode_num=='发送验证码'" type="primary" plain style="width: 35%;height: 100%;position: absolute;left: 107%;" @click="getVercode">{{vertificationcode_num}}</el-button>
					<el-button v-else type="primary" plain style="width: 35%;height: 100%;position: absolute;left: 107%;">{{vertificationcode_num}}秒后获取</el-button>
			</el-form-item>
			<el-form-item prop="password">
				<span class="svg-container"><i class="el-icon-lock"></i></span>
				<el-input v-model="registForm.password" name="password" auto-complete="on" placeholder="请输入密码"/>
			</el-form-item>
            <el-form-item prop="orgCode" v-show="orgCodeCss">
				<span class="svg-container"><i class="el-icon-postcard"></i></span>
				<el-input v-model="registForm.orgCode" name="orgCode" type="text" auto-complete="on" placeholder="请输入组织编码" />
			</el-form-item>
			<el-row>
				<el-col :span=12>
					<el-button type="text" @click="toRegistOrg">还没有组织？去注册<i class="el-icon-d-arrow-right"></i></el-button>
				</el-col>
				<el-col :span=12>
					<el-button type="text" @click="handleLogin" style="float:right">已有账号,去登陆<i class="el-icon-upload2"></i></el-button>
				</el-col>
			</el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item><el-button :loading="loading" class="assistance_color"  type="info" style="width:100%;" @click.native.prevent="resetForm('registForm')">重置</el-button></el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item><el-button :loading="loading"  type="primary" style="width:100%;" @click.native.prevent="handleRegist">注册</el-button></el-form-item>
                </el-col>
            </el-row>
		</el-form>
	</div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
export default {
	name: 'Regist',
	computed: {
		...mapGetters(['userInfo','api']) //获取
	},
	data() {
		const validatePhone = (rule, value, callback) => {
            if(value.length==0){
                callback(new Error("手机号为必填项"))
            }else{
                callback();
            }
		};
		const validatePassWord = (rule, value, callback) => {
			if (value.length == 0) {
				callback(new Error('密码为必填项'));
			} else {
				callback();
			}
        };
        const validateOrgCode = (rule, value, callback) => {
			if (value.length == 0) {
				callback(new Error('组织编码为必填项'));
			} else {
				callback();
			}
        };
        const validateVerCode = (rule, value, callback) => {
			if (value.length == 0) {
				callback(new Error('验证码为必填项'));
			} else {
				callback();
			}
		};
		return {
			registForm: {
                phone:'',
                password:'',
                orgCode:'',
                vercode:'',
			},
			registRules: {
				phone: [{ required: true, trigger: 'blur', validator: validatePhone }],
                password:[{ required: true, trigger: 'blur', validator: validatePassWord }],
                orgCode: [{ required: true, trigger: 'blur', validator: validateOrgCode }],
				vercode: [{ required: true, trigger: 'blur', validator: validateVerCode }]
			},
			loading: false, //登录时的雪花转
			redirect: undefined,
			orgCodeCss:true,//默认false，隐藏组织编码输入框
			vertificationcode_num:'发送验证码',
		};
	},
	mounted() {
		let type=this.$route.params.type;
		// console.log("进入regist"+this.$route.params.type);
		// console.log(this.userInfo);
		// //获取动态码
		// this.getVercode()
		if(type==1){
			//个人版，隐藏组织编码输入框
			this.orgCodeCss=false
		}else{
			//企业版
			this.orgCodeCss=true
		}
	},
	methods: {
		//获取
		getVercode(){
			let that=this;
			// num 0:注册获取验证码  1:修改密码获取验证码,2重置密码
			let req={phone:that.registForm.phone,num:0}
			that.GLOBAL.doPost(that.api.GLOBAL_getPhoneCode,req,function(res){
				if(res.code==200){
					that.$message({type: 'success',message: res.msg});
					if(res.data){
						that.get_time()
					}
				}
			})
        },
        //跳转到注册
        handleRegist(){
			let that = this;
			that.$refs.registForm.validate(valid => {
				if (valid) {
					let req = {
						value3:that.registForm.phone,
						value2:that.registForm.password,
						value5:that.registForm.orgCode,
						value4:that.registForm.vercode,
					};
					console.log(req);
					that.GLOBAL.doPost(that.api.GLOBAL_user_regist,req,function(res) {
						console.log(res)
						if(res.code==200){
							//如果注册成功跳到登录界面
							console.log(res.data)
							that.$router.push({ name: 'login', path: '/login/index' });
						}else{
							console.log(res.data)
						}
							
					});
				} else {
					console.log('error submit!!');
					return false;
				}
			});
        },
		handleLogin() {
			let that = this;
			that.$router.push({name:"login",path:"/login/index"})
		},
		//公司注册
		toRegistOrg(){
			console.log("公司注册")
			let that=this;
			that.$router.push({name:"regist_org",path:"/regist/regist_org"})
		},
		//重置参数
		resetForm(formData) {
			this.$refs[formData].resetFields();
		},
		//倒计时
		get_time(){
			let that=this
			that.vertificationcode_num=120
			let tmp=setInterval(()=>{
				that.vertificationcode_num--
				if(that.vertificationcode_num<=0){
					that.vertificationcode_num='发送验证码'
					clearInterval(tmp)
				}
			},1000)
		},
	}
};
</script>

<style rel="stylesheet/scss" lang="scss">
$bg: #2d3a4b;
$light_gray: #888;
$assistance_color:#029789;

/* reset element-ui css */
.regist {
	overflow: auto;
	.el-input {
		display: inline-block;
		height: 47px;
		width: 85%;
		input {
			background: transparent;
			border: 0px;
			-webkit-appearance: none;
			border-radius: 0px;
			padding: 12px 5px 12px 15px;
			color: $light_gray;
			height: 47px;
			&:-webkit-autofill {
				// -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
				-webkit-text-fill-color: #fff !important;
			}
		}
	}
	.assistance_color{
		color: $assistance_color;
	}
	.el-button--info{
		background: $assistance_color;
		color: white;
	}
	.el-form-item {
		border: 1px solid rgba(255, 255, 255, 0.1);
		background: #fff;
		border-radius: 5px;
		color: #454545;
	}
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
$bg: #eee;
$dark_gray: #889aa4;
$light_gray: #888;
.regist {
	position: fixed;
	height: 100%;
	width: 100%;
	background-color: $bg;
	.login-form {
		position: absolute;
		left: 0;
		right: 0;
		width: 520px;
		max-width: 100%;
		padding: 35px 35px 15px 35px;
		margin: 7% auto;
	}
	.tips {
		font-size: 14px;
		color: #fff;
		margin-bottom: 10px;
		span {
			&:first-of-type {
				margin-right: 16px;
			}
		}
	}
	.svg-container {
		padding: 6px 5px 6px 15px;
		color: $dark_gray;
		vertical-align: middle;
		width: 30px;
		display: inline-block;
	}
	.title {
		font-size: 26px;
		font-weight: 400;
		color: $light_gray;
		margin: 0px auto 40px auto;
		text-align: center;
		font-weight: bold;
	}
	.show-pwd {
		position: absolute;
		right: 10px;
		top: 7px;
		font-size: 16px;
		color: $dark_gray;
		cursor: pointer;
		user-select: none;
	}
}
</style>
